<template>
  <div class="Chief-Twelve" chief-style-set>
    <Title title="我的待办事项" more MoreUrl='#/dashboard/personal/flowBussiness'></Title>
    <div class="content-h-auto Twelve-box" chief-style-set>
      <el-tabs v-model="activeName" style="height:100%;">
        <el-tab-pane name="1">
          <span slot="label">待办<span> ( {{FlowList.length}} )</span></span>
            <div class="Box-item" v-for="(item,index) in FlowList" :key="index + 'FlowList'" :title="item.instanceName" @click="showDialogUrl(item)">· {{item.instanceName}}</div>
        </el-tab-pane>
        <el-tab-pane name="2">
          <span slot="label">已办<span> ( {{HaveDoneList.length}} )</span></span>
            <div class="Box-item" v-for="(item,index) in HaveDoneList" :key="index + 'HaveDoneList'" :title="item.instanceName" @click="showDialogUrl(item)">· {{item.instanceName}}</div>
        </el-tab-pane>
      </el-tabs>
    </div>

     <Dialog
        :dialogVisible.sync="showDialog"
        :showToolBar="false"
        title="我的待办事项"
        :fullscreen='true'
        @comfireFun="showDialog = false"
        @defineFun="showDialog = false"
        ref="portalDialog"
        width="50%"
      >
        <template slot="content">
          <iframe :src="DialogUrl" width="100%" height="100%" frameborder="0"></iframe>
        </template>
      </Dialog>
  </div>
</template>

<script>
import Title from "@/components/baseTitle";
import Dialog from "@/components/portalDialog";
import { axiosGetH3WorkFlowList } from "@/api/home";
export default {
  name: "Chief-Twelve",
  components: {
    Title, Dialog
  },
  data () {
    return {
      activeName: "1",
      FlowList: [],
      HaveDoneList: [],
      showDialog: false,
      DialogUrl: ""
    };
  },
  created () {
    this.init();
  },
  methods: {
    async init () {
      let year = new Date().getFullYear();
      let month = new Date().getMonth() + 1;
      let day = new Date().getDate();
      let params = {
        itemType: "N4",
        pageIndex: 1,
        pageSize: 10,
        receiveEndTime: `${year}-${month}-${day}`,
        receiveStartTime: `${year - 1}-${month}-${day}`,
        state: "0"
      };
      await axiosGetH3WorkFlowList(params).then(res => {
        if (res.status === 200) {
          this.FlowList = res.data.data.records;
        }
      });
      params.state = "1";
      axiosGetH3WorkFlowList(params).then(res => {
        if (res.status === 200) {
          this.HaveDoneList = res.data.data.records;
        }
      });
    },

    showDialogUrl (item) {
      this.DialogUrl = item.workItemUrl;
      this.showDialog = true;
    }
  }
};
</script>

<style lang='less'>
.Chief-Twelve{
  background-color: #fff;
  .Twelve-box{
    overflow: hidden;
    .Box-item{
      cursor: pointer;
      padding: 1vh 0;
      font-size: 16px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>